<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>MyPetStore</title>
    <link rel="stylesheet" th:href="@{/css/mypetstore.css}" type="text/css" media="screen" />
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style>

        .ui-autocomplete {
            max-height: 150px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            z-index: 1000;
        }
        .ui-state-focus {
            background-color: #e0e0e0;
        }

        #MyAccount {
            display: inline-block;
            position: relative;
            top: 10px;

        }
        #MyAccount img {
            width: 45px;
            height: 45px;
            object-fit: contain;
            border-radius: 50%;

        }

    </style>
    <script>
        $(function() {
            $("#keyword").autocomplete({
                source: ["Amazon Parrot", "Finch", "Koi", "Goldfish", "Angelfish",
                    "Tiger Shark", "Persian", "Manx", "Bulldog", "Chihuahua",
                    "Dalmation", "Poodle", "Golden Retriever", "Labrador Retriever",
                    "Iguana", "Rattlesnake"]
            });
        });
    </script>
</head>

<body>
<div id="Header">
    <div id="Logo">
        <div id="LogoContent">
            <a th:href="@{/cmsMainForm}"><img th:src="@{/images/logo-topbar.gif}"/></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a th:href="@{/cmsOrderForm}">
                <img style="width: 20px;height: 30px;" align="middle" name="img_cart" th:src="@{/images/order.png}"/></a>


            <img align="middle" th:src="@{/images/separator.gif}"/>

            <!-- 登录状态判断 -->
            <div th:if="${session.loginAccount == null}" style="display: inline-block;">
                <a th:href="@{/cmsSignonForm}">Sign In</a>
                <img align="middle" th:src="@{/images/separator.gif}"/>
            </div>
            <div th:if="${session.loginAccount != null}" style="display: inline-block;">
                <a th:href="@{/cmsSignOut}">Sign Out</a>
                <img align="middle" th:src="@{/images/separator.gif}"/>
                <a th:href="@{/cmsMyAccount}"><div id="MyAccount"   th:utext="${session.loginAccount.image}"></div></a>
                <img align="middle" th:src="@{/images/separator.gif}"/>
            </div>

            <a th:href="@{/help}">?</a>
        </div>
    </div>

    <div id="Search" class="Search">
        <div id="SearchContent">
            <form th:action="@{/search}" method="post">
                <input type="text" name="keyword" id="keyword"
                       style="width: 300px;height: 35px"/>
                <input type="submit" value="Search" style="width: 60px;height: 35px"/>
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a th:href="@{/cmsCategoryForm(categoryId='FISH')}">
            <img th:src="@{/images/sm_fish.gif}"/></a>
        <img th:src="@{/images/separator.gif}"/>

        <a th:href="@{/cmsCategoryForm(categoryId='DOGS')}">
            <img th:src="@{/images/sm_dogs.gif}"/></a>
        <img th:src="@{/images/separator.gif}"/>

        <a th:href="@{/cmsCategoryForm(categoryId='CATS')}">
            <img th:src="@{/images/sm_reptiles.gif}"/></a>
        <img th:src="@{/images/separator.gif}"/>

        <a th:href="@{/cmsCategoryForm(categoryId='REPTILES')}">
            <img th:src="@{/images/sm_cats.gif}"/></a>
        <img th:src="@{/images/separator.gif}"/>

        <a th:href="@{/cmsCategoryForm(categoryId='BIRDS')}">
            <img th:src="@{/images/sm_birds.gif}"/></a>
    </div>

    <!-- 内容区域保持不变 -->
    <div id="Content">
        <!-- 原有内容区域 -->
    </div>
</div>
</body>
</html>